<div class="fs" id="fs_dialog_container" style="display:none">
    <div class="toolbar">
        <form id="mkdir_form" action="<?php echo $this->getUrl(NULL, 'create-directory') ?>" method="post">
            <input type="text" id="directory_name" name="name" style="float:left"/>
            <button type="submit" style="float:left;"><?php echo $this->__('share.button.mkdir') ?></button>
            <input type="hidden" name="path" value="<?php echo $this->root; ?>"/>
        </form>
        <form id="upload_form" action="<?php echo $this->getUrl(array(), 'upload') ?>" method="post" enctype="multipart/form-data">
            <button type="button" onclick="javascript:returnSelected()" style="float:right;"><?php echo $this->__('share.button.ok') ?></button>
            <button id="upload_button" type="submit" disabled="disabled" style="float:right;"><?php echo $this->__('share.button.upload') ?></button>
            <input type="file" id="file" name="file" style="float:right;"/>
            <input type="text" id="path" name="path" readonly="true" value="<?php echo $this->root; ?>" style="font-size:80%;display:none;"/>
            <input type="hidden" name="type" value="image"/>
        </form>
    </div>
    <div class="clear"></div>
    <div class="left"><div id="directories"></div></div>
    <div class="right"><div id="files"></div></div>
    <div class="selected">
        <ul id="selected_files">
       <?php foreach($this->files as $file): ?>
            <li url="<?php echo $file ?>" ondblclick="javascript:removeSelectedFile(this)"><a href="javascript:void(0)"><img src="<?php echo $file ?>"/></a></li>
        <?php endforeach; ?>
        </ul>
    </div>
</div>
<script language="javascript" type="text/javascript">
    var root = '<?php echo $this->root?>';
    var ret = new LayerMode();

    function selectFile(url){
        if($('#selected_files li').length >= 11){
            return;
        }
        var found = false;
        $('#selected_files li').each(function(){
            if($(this).attr('url') == url){
                found = true;
                return false;
            }
        });

        if(!found){
            $('#selected_files').append('<li url="' + url + '" ondblclick="javascript:removeSelectedFile(this)"><a href="javascript:void(0)"><img src="' + url + '"/></a></li>');
        }
    }

    function removeSelectedFile(el){
        $('#selected_files li').each(function(){
            if($(this).attr('url') == $(el).attr('url')){
                $(el).remove();
                return false;
            }
        });
    }

    function showDirectories(){
        Kdf.Ajax.loadHtml({
            url:'<?php echo $this->getUrl(NULL, 'directories') ?>',
            method:'POST',
            data: {'path':root},
            success:function(data){
                $('#directories').html(data);
            }
        });
    }

    function showFiles(path){
        $('input[name="path"]').val(path);
        Kdf.Ajax.loadHtml({
            url:'<?php echo $this->getUrl(NULL, 'files') ?>',
            method:'POST',
            data: {'path':path},
            success:function(data){
                $('#files').html(data);
            }
        });
    }

    function returnSelected(){
        var callback = <?php echo $this->callback ?>;
        var files = [];
         $('#selected_files img').each(function(){
            files.push($(this).attr('src'));
        });
        callback(files);
        ret.close();
    }

    function layer(){
        ret.speed = "fast";	//弹出和关闭耗时 默认 400ms
        ret.bgLayer = true;	//false 关闭背景层 默认 true
        ret.bgLayerEvent = true;	//默认背景层快速关闭事件 true 开启 默认 false
        ret.txtTitle = '登录窗口';
        ret.thead();
        ret.tbody($('#fs_dialog_container').show());
        ret.content.css({"width":700,"height":800});
        ret.open();
        ret.range = true; //拖动范围 true(可见区域) 默认 false(不限)
        ret.drag();		//启用拖动
    }

//    $('#fs_dialog_container').show().dialog({
//        title: '<?php echo $this->title ?>',
//        width:600,
//        height:450,
//        modal: true,
//        resizable: false,
//        close:function(){
//            $(this).dialog('destroy');
//            $('#fs_dialog_container').remove();
//        }
//    });

    $('#file').change(function(){
       $('#upload_button').removeAttr('disabled');
    });

    $('#upload_form').submit(function(){
        $(this).ajaxSubmit({
            success:function(responseText, statusText, xhr, $form){
                var data = eval('(' + responseText + ')');
                showFiles($('#path').val());
                selectFile(data.url);
                $('#select .l-btn-text').html('<?php echo $this->__('share.button.select_file') ?>');
                $('#file').val('');
                $('#upload_button').attr('disabled', 'disabled');
            }
        });
        return false;
    });


    $('#mkdir_form').validate({
       rules:{
           name:{
               required: true,
               character: true
           }
       }
    });
    $('#mkdir_form').submit(function(){
        $(this).ajaxSubmit({
            success:function(responseText, statusText, xhr, $form){
                showDirectories();
                showFiles($('#path').val() + '/' + $('#directory_name').val());
                $('#directory_name').val('');
            }
        });
        return false;
    });
//    showDirectories('<?php echo $this->root ?>');
    showFiles('<?php echo $this->root ?>');
    layer();
</script>